<template>
  <div class="pagination-container">
    <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {

            }
        },
        props: ['currentPage', 'pageSize', 'total'],
      methods:{
        handleSizeChange(pageSize){
        this.$emit('changePage',pageSize,this.currentPage)
        },
        handleCurrentChange(currentPage){
          this.$emit('changePage',this.pageSize,currentPage)
        }
      }
    }
</script>

<style scoped>
    .pagination-container {
        margin-top: 30px;
    }

</style>